<template>
  <div>
    <a v-bind:href="url">百度</a>
    <button v-on:click="go">修改URL</button>
    <span v-text="str">包含标签</span>
    <br>
    <span v-html="str">转换标签</span>
    <h1 v-if="flag">开关</h1>
    <div>
      <h2 v-if="flag">我是h2标签</h2>
      <h3 v-else>我是h3标签</h3>
    </div>
    <ul>
      <li v-for="(item, index) in obj"
          :key="index">
        {{item}}
      </li>
    </ul>
    <img :src="imgSrc" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'http://www.baidu.com',
      str: '<span>hello</hello>',
      flag: true,
      obj: {
        name: 'zs',
        age: 18,
        sex: '男'
      },
      imgSrc: 'https://cn.vuejs.org/images/logo.svg'
    }
  },
  methods: {
    go () {
      this.url = 'http://www.xiaomi.com'
    }
  }
}
</script>

<style>
</style>